<template>
    <div class="new_div1">
      <el-dialog
        draggable
        width="60%"
        title="产品明细列表"
        v-model="dialogVisibles"
        :before-close="share_cancel"
      >
        <div>
          <el-form ref="formQuery" label-width="70px" :model="formData">
            <el-row :gutter="24" justify="space-around">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
                <div>
                  <el-form-item style="width: 100%" label="品牌" prop="assistant_id">
                    <VabSelectForm multiple v-if="assistant_list.length > 0"  v-model="formData.assistant_id" :options="assistant_list"/>
                  </el-form-item>
                </div>
              </el-col>  
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
                <div>
                  <el-form-item width="160" label="产品编码" prop="number">
                    <LazySelect multiple  v-model="formData.number" type="number" :userOrgId="userOrgId"/>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
                <div>
                  <el-form-item style="width: 100%" label="产品名称" prop="name">
                    <LazySelect multiple  v-model="formData.name" type="name" :userOrgId="userOrgId"/>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
                <div>
                  <el-form-item style="width: 100%" label="一级类目" prop="class_id1">
                    <VabSelectForm :multiple="true"  @change="(value: string) => {
                      _ProductSearchClass(value)
                    }" v-if="class_id1_list.length > 0"  v-model="formData.class_id1" :options="class_id1_list"/>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
                <div>
                  <el-form-item style="width: 100%" label="二级类目" prop="class_id2">
                    <el-select
                      collapse-tags
                      clearable
                      collapse-tags-tooltip
                      filterable
                      v-model="formData.class_id2"
                      class="width_100"
                      placeholder="请选择"
                      multiple
                      :filter-method="query_class"
                    >
                      <el-option v-for="item in class_id2_list" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
                <div class="button-query">
                  <el-button @click="querySreach" size="small" type="primary">
                    查询
                  </el-button>
                  <el-button size="small" @click="handleReset">
                    重置
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div>
          <el-table
            v-loading="loading"
            load="false"
            ref="multipleTableRef"
            border
            :data="tableData"
            height="320px"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="40" />
            <el-table-column label="序号" align="center" width="80">
              <template #default="scope">
              <span
                v-text="scope.$index + 1"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              empty-text="--"
              label="品牌"
              align="center"
              prop="assistant_name"
              width="100"
  
            >
              <template #default="scope">
                <span
                  class="ellipsis"
                  v-text="_FieldFormat(scope.row.assistant_name, '')"
                ></span>
              </template>
            </el-table-column>
            <el-table-column
              empty-text="--"
              label="一级类目"
              align="center"
              prop="class_name1"
              width="100"
  
            >
              <template #default="scope">
                <span
                  class="ellipsis"
                  v-text="_FieldFormat(scope.row.class_name1, '')"
                ></span>
              </template>
            </el-table-column>
            <el-table-column
              empty-text="--"
              label="二级类目"
              align="center"
              prop="class_name2"
              width="100"
  
            >
              <template #default="scope">
                <span
                  class="ellipsis"
                  v-text="_FieldFormat(scope.row.class_name2, '')"
                ></span>
              </template>
            </el-table-column>
            <el-table-column
              empty-text="--"
              label="产品编码"
              prop="number"
              align="center"
              width="160"
            >
              <template #default="scope">
                <span
                  class="ellipsis"
                  v-text="_FieldFormat(scope.row.number, '')"
                ></span>
              </template>
            </el-table-column>
            <el-table-column
              empty-text="--"
              label=" 产品名称"
              prop="name"
              align="center"
              min-width="100"
            >
              <template #default="scope">
                <span
                  class="ellipsis"
                  v-text="_FieldFormat(scope.row.name, '')"
                ></span>
              </template>
            </el-table-column>
            <el-table-column
              empty-text="--"
              label="规格型号"
              align="center"
              prop="specification"
              width="100"
            >
              <template #default="scope">
                <span
                  class="ellipsis"
                  v-text="_FieldFormat(scope.row.specification, '')"
                ></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <template #footer>
          <span class="dialog-footer customerDialog3">
              <el-button type="primary" size="small" @click="share_save">确定</el-button>
              <el-button size="small" @click="share_cancel">返回</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
<script setup lang="ts">
import lodash from 'lodash';
import { getProductList, getProductSearch, productSearchClass } from "/@/api/dms/product";
import { ElMessage } from "element-plus";
import { FieldFormat } from "/@/utils/utils";
import LazySelect from '/@/components/lazySelect/index.vue'
defineOptions({
  name: "ProductsAll"
})

const props = defineProps(['userOrgId'])

const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const dialogVisibles = ref(false)
const formQuery = ref<any>(null)
const loading = ref(false)
const formData = ref({
  assistant_id: [],
  name: [],
  number: '',
  class_id1: [],
  class_id2: [],
})
const tableData = ref<any>([])
// *********查询***************
const assistant_list = ref([])
const name_list = ref([])
const number_list = ref([])
const class_id1_list = ref([])
const class_id2_list = ref<any>([])
const all_date = ref<any>([])
const class_date = ref(undefined)

const page = ref(1)
const count = ref(100)

//多选
let multipleDate = reactive<any>([])
let multipleList = ref<any>(undefined)
const handleSelectionChange = (val: any, va: any) => {
  multipleDate = val
}

const emit = defineEmits(['handleShareSave'])

const share_save = (va: any) => {
  multipleList.value = [...multipleDate]
  emit('handleShareSave', multipleDate.map((item: any) => {
    return {
      ...item,
      product_id: item.id,
      id: 0,
    }
  }))
  dialogVisibles.value = false
}
const share_cancel = () => {
  multipleDate = []
  dialogVisibles.value = false
}
const multipleTableRef = ref()
const watchScroll = lodash.debounce(() => {
  multipleTableRef.value.$refs.bodyWrapper.addEventListener('scroll', async (res: any) => {
    const { clientHeight, scrollTop, scrollHeight } = res.target
    if (clientHeight + scrollTop === scrollHeight) {
      if (page.value * 20 < count.value) {
        await page.value++
      } else {
        ElMessage.success('到底了~')
        return
      }
      loading.value = true
      _GetProductList(3)
    }
  }, true)
}, 1000)


watchEffect(() => {
  assistant_list.value = all_date.value.brand?.map((i: any) => { return { value: i.entry_id, label: i.name } })
  number_list.value = all_date.value.number?.map((i: any) => { return { value: i.number } })
  name_list.value = all_date.value.name?.map((i: any) => { return { value: i.name, label: i.name } })
  class_id1_list.value = all_date.value.class_one?.map((i: any) => { return { value: i.id, label: i.data_title } })
  class_id2_list.value = all_date.value.class_two?.map((i: any) => { return { value: i.id, label: i.data_title } })
})
watch(class_date, () => {
  if (class_date) {
    class_id2_list.value = class_date.value
  }
})
const _GetProductSearch = async () => {
  try {
    const res = await getProductSearch()
    res.data.brand.push({ entry_id: '', name: '空' })
    res.data.class_one.push({ id: '', data_title: '空' })
    res.data.class_two.push({ id: '', data_title: '空' })
    res.data.series.push({ id: '', data_title: '空' })
    res.data.category.push({ id: '', data_title: '空' })
    all_date.value = res.data
  } catch (error) { }
}
// 二级分类
const _ProductSearchClass = async (class_id: any) => {
  class_id2_list.value = [{}]
  try {
    const res = await productSearchClass({ class_id })
    class_id2_list.value = res.data.map((item: any) => {
      return {
        value: item.id,
        label: item.data_title
      }
    })
  } catch (error) {

  }
}
const querySreach = lodash.debounce(async (va: any) => {
  loading.value = true
  tableData.value = []
  page.value = 1
  _GetProductList(1)
}, 500)
const handleReset = lodash.debounce(async () => {
  formQuery.value.resetFields()
  loading.value = true
  _GetProductList(2)
}, 500)
const _GetProductList = async (type: number) => {

  let data = {
    page: page.value, limit: 20, type: 1,
    filter: {
      ...formData.value,
      use_org_id: props.userOrgId
    }
  }

  try {
    let res = await getProductList({ ...data })

    tableData.value = [...tableData.value, ...res.data.list]
    count.value = res.data.count

    loading.value = false

    if (type == 1) {
      ElMessage.success('查询成功')
      return
    }
    if (type == 2) ElMessage.success('重置成功')
    if (type == 3) ElMessage.success('加载成功')


  } catch (error) {

  }

}
const query_class = (value: any) => {
  const arr = all_date.value.class_two?.map((i: any) => { return { value: i.id, label: i.data_title } })
  class_id2_list.value = arr.filter((option: any) => {
    const Boo = (option?.label ?? '')?.toLowerCase().includes(value?.trim().toLowerCase())
    if (Boo) return option
  })
}

/**
 * @实例
 */

watchEffect(() => {
  if (multipleTableRef.value) watchScroll()
})
//抛出数据
defineExpose({
  dialogVisibles,
  multipleList,
  _GetProductList: () => {
    dialogVisibles.value = true
    tableData.value = []
    page.value = 1
    if (formQuery.value) formQuery.value.resetFields()
    _GetProductList(0)
  },
  handleReset: () => {
    if (!dialogVisibles.value) return
    handleReset()
  }
})
onMounted(() => {
  _GetProductSearch()
})
</script>
  
<style lang="scss" scoped>
.new_div1 {
  :deep() {
    .el-dialog__body {
      padding-top: 10px;
    }
  }
}

.customerDialog3 {
  display: flex;
  justify-content: center;
}

.button-query {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
</style>
  